<template>
  <div class="basicBox">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="网站名称(title) :"
        prop="webName"
        label-width="200px"
      >
        <el-input v-model="ruleForm.webName"></el-input>
      </el-form-item>
      <el-form-item label="logo:" label-width="200px" prop="logoUrl">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :before-upload="handleBeforeUploaded"
          :limit="1"
          :on-success="uploaded"
          :on-remove="handleRemoveLogo"
          accept=".jpg,.jpeg,.png,.gif"
          :file-list="fileList"
          :on-exceed="warn"
        >
          <el-button size="small"
            ><i class="el-icon-upload2"></i> 点击上传</el-button
          >
          <div slot="tip" class="el-upload__tip">
            支持扩展名: .png .jpg .jpeg .gif
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="网站关键字(keywords) :"
        prop="keywords"
        label-width="200px"
      >
        <el-input v-model="ruleForm.keywords"></el-input>
      </el-form-item>
      <el-form-item
        label="网站简介(description) :"
        prop="webDescription"
        label-width="200px"
      >
        <el-input v-model="ruleForm.webDescription"></el-input>
      </el-form-item>
      <el-form-item label="联系电话 :" prop="telNumber" label-width="200px">
        <el-input v-model="ruleForm.telNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="工作时间 :" prop="workingHours" label-width="200px">
        <el-input v-model="ruleForm.workingHours"></el-input>
      </el-form-item>
      <el-form-item label="二维码 :" label-width="200px" prop="qrCode">
        <el-upload
          :action="uploadUrl"
          list-type="picture-card"
          :auto-upload="true"
          :limit="1"
          :file-list="fileList2"
          :on-success="uploaded1"
          :on-exceed="warn"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="公司地址 :"
        prop="companyAddress"
        label-width="200px"
      >
        <el-input v-model="ruleForm.companyAddress"></el-input>
      </el-form-item>
      <el-form-item label="邮箱 :" prop="email" label-width="200px">
        <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="版权信息 :"
        prop="copyrightInformation"
        label-width="200px"
      >
        <el-input v-model="ruleForm.copyrightInformation"></el-input>
      </el-form-item>
      <el-form-item
        label="ICP备案信息 :"
        prop="icpFilingInformation"
        label-width="200px"
      >
        <el-input v-model="ruleForm.icpFilingInformation"></el-input>
      </el-form-item>
      <el-form-item
        label="网安备案信息 :"
        prop="securityInformation"
        label-width="200px"
      >
        <el-input v-model="ruleForm.securityInformation"></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    //  电话及邮箱正则验证
    var validateTel = (rule, value, callback) => {
      if (
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          value
        ) ||
        /^(0\d{2,3})-(\d{7,8})$/.test(value)
      ) {
        callback();
      } else {
        callback(new Error("请输入正确的号码格式"));
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (/[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的邮箱格式"));
      }
    };

    return {
      uploadUrl: "http://192.168.1.121:8080/details/fileupload",
      ruleForm: {
        webName: "",
        logoUrl: "",
        keywords: "",
        webDescription: "",
        telNumber: "",
        workingHours: "",
        qrCode: "",
        companyAddress: "",
        email: "",
        copyrightInformation: "",
        icpFilingInformation: "",
        securityInformation: "",
      },
      rules: {
        webName: [
          { required: true, message: "网站名称不能为空", trigger: "blur" },
        ],
        logoUrl: [
          { required: true, message: "请上传logo图片", trigger: "blur" },
        ],
        keywords: [
          { required: true, message: "网站关键字不能为空", trigger: "blur" },
        ],
        webDescription: [
          { required: true, message: "网站简介不能为空", trigger: "blur" },
        ],
        workingHours: [{ required: true, message: "工作时间不能为空", trigger: "blur" }],
        qrCode: [
          { required: true, message: "请上传二维码图片", trigger: "blur" },
        ],
        companyAddress: [
          { required: true, message: "公司地址不能为空", trigger: "blur" },
        ],
        copyrightInformation: [
          { required: true, message: "版权信息不能为空", trigger: "blur" },
        ],
        icpFilingInformation: [
          { required: true, message: "ICP备案信息不能为空", trigger: "blur" },
        ],
        securityInformation: [{ required: true, message: "网安备案信息不能为空", trigger: "blur" }],
        telNumber: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          { validator: validateTel, trigger: "blur" },
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          { validator: validateEmail, trigger: "blur" },
        ],
      },
      fileList: [],
      fileList2: [],
      disabled: false,
    };
  },
  methods: {
    // 清空表格
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 删除已有logo图片
    handleRemoveLogo(file, fileList) {
      if (!this.ruleForm.logoUrl) return;
      this.$confirm("是否删除该logo?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.fileList = [];
          this.ruleForm.logoUrl = "";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除已有二维码图片
    handleRemove(file, fileList) {
      if (!this.ruleForm.qrCode) return;
      this.$confirm("是否删除该二维码图片?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.fileList2 = [];
          this.ruleForm.qrCode = "";
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 限制文件上传大小
    handleBeforeUploaded(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error("上传logo图片大小不能超过 1MB!");
      }
      return isLt1M;
    },
    uploaded(res) {
      // 图片上传后获取图片路径
      this.ruleForm.logoUrl = res;
    },
    uploaded1(res) {
      console.log(res);
      this.ruleForm.qrCode = res;
    },
    warn() {
      this.$message({
        message: "只允许上传一张图片",
        type: "warning",
      });
    },
    async initForm() {
      this.fileList = [];
      this.fileList2 = []
      let { data: {data} } = await this.$http.getWebInformation();
      this.ruleForm = data;
      // 将已有图片渲染到页面上
      if (data.logoUrl) {
        this.fileList.push({ name: "logo.png", url: data.logoUrl });
      }
      if (data.qrCode) {
        this.fileList2.push({ name: "qrCode.png", url: data.qrCode });
      }
    },
    async submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(valid);
        if (!valid) return false;
        // 验证通过,进行下一步操作
        this.$confirm("确认保存修改?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let params = this.$qs.stringify(this.ruleForm);
            // console.log(params);
            let { meta: { status } } = await this.$http.getWebOperate(params);
            if (status == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.initForm();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "保存失败",
            });
          });
      });
    },
  },
  created() {
    this.initForm();
  },
};
</script>

<style scoped lang="less">
.basicBox {
  width: 600px;
  margin-left: 150px;
  .btn {
    margin-left: 350px;
    margin-top: 100px;
  }
}
/deep/.el-upload-list--picture-card {
  position: absolute;
  left: 200px;
}
</style>
